<div></div>
<script>
    play(5);

    function play(num) {
        //生成num个div
        for (var i = 0; i < num; i++) {
            var Div = document.createElement("div");
            Div.className = "ball";
            Div.leftVal = (3 + i) * 0.1; //预存每个球的初始速度
            Div.topVal = (3 + i) * 0.1; //预存每个球的初始速度
            Div.style.backgroundImage = randomC();
            document.body.appendChild(Div);
        }

        var aBall = document.querySelectorAll(".ball");
        (maxTop = document.documentElement.clientHeight - aBall[0].clientHeight), //获取top的最大值
        (maxLeft = document.documentElement.clientWidth - aBall[0].clientWidth); //获取left的最大值

        window.onresize = function() {
            maxTop = document.documentElement.clientHeight - aBall[0].clientHeight; //获取top的最大值
            maxLeft = document.documentElement.clientWidth - aBall[0].clientWidth; //
        };

        auto();

        function auto() {
            for (var i = 0; i < num; i++) {
                var Ball = aBall[i],
                    startL = Ball.offsetLeft, //取每个球的初始left和TOP值
                    startT = Ball.offsetTop, //取每个球的初始left和TOP值
                    Left = startL + Ball.leftVal, //改变，每个球的left和top值
                    Top = startT + Ball.topVal; //改变，每个球的left和top值

                if (Left >= maxLeft || Left <= 0) {
                    Left = Math.min(Left, maxLeft); //限制Left的最大值
                    Left = Math.max(Left, 0); //限制最小值

                    Ball.leftVal = -Ball.leftVal;
                    Ball.style.backgroundImage = randomC();
                }
                if (Top >= maxTop || Top <= 0) {
                    Ball.topVal = -Ball.topVal;

                    Top = Math.min(Top, maxTop); //限制Left的最大值
                    Top = Math.max(Top, 0); //限制最小值
                    Ball.style.backgroundImage = randomC();
                }

                Ball.style.top = Top + "px";
                Ball.style.left = Left + "px";
            }
            requestAnimationFrame(auto);
        }
        // rgb(0-255)
        function randomC() {
            // var r = Math.floor(Math.random() * 120);
            var imgurl = `http://ezreal-yk.cn/photos/${3}.jpg`;
            return "url(" + imgurl + ")";
        }
        // // rgb(0-255)
        // function randomC() {
        //     var r = Math.floor(Math.random() * 256),
        //         g = Math.floor(Math.random() * 256),
        //         b = Math.floor(Math.random() * 256);
        //     return "rgb(" + r + "," + g + "," + b + ")";
        // }
    }
</script>
<style>
    * {
        margin: 0;
        padding: 0;
        font-family: Microsoft YaHei, serif;
    }
    
    li {
        list-style: none;
    }
    
    .ball {
        position: absolute;
        top: 0;
        left: 0;
        width: 100px;
        height: 100px;
        /* background: pink; */
        border-radius: 50%;
        background-repeat: none;
    }
</style>